<template>
  <div class="agant-box">
    <el-card class="agant-card">
      <div class="search-button-box">
        <el-row type="flex" justify="space-between">
          <el-button type="primary" size="small" @click="addFn">添加经纪</el-button>
          <el-input v-model="name_contains" placeholder="请输入关键字" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search" />
          </el-input>
        </el-row>
      </div>
      <el-table
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        style="width:100%"
        :data="agantData"
        class="agant-table"
      >
        <el-table-column label="图片" prop="image">
          <template v-slot="{row}">
            <img v-imgErr="require('@/assets/nvren.jpg')" class="imgHeader" :src="row.image">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </el-row>
    </el-card>
    <!-- 新增经济 -->
    <AddAgant ref="addAgant" :show-dialog.sync="showDialog" @updateEvent="getAgant" />
  </div>
</template>

<script>
import AddAgant from './components/add-agant.vue'
import { getAgant, delAgant, getAgantCount } from '@/api/agant'
export default {
  components: { AddAgant },
  data() {
    return {
      agantData: [],
      showDialog: false,
      limit: 2,
      start: 0,
      total: 0,
      name_contains: ''
    }
  },
  created() {
    this.getAgantList()
    this.getAgant()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },
    // 获取经济数量
    async getAgant() {
      const res = await getAgantCount()
      this.total = res.data
    },
    // 分页功能
    currentChange(val) {
      this.start = val * this.limit - this.limit
      this.getAgantList()
    },
    sizeChange(val) {
      console.log(80, val)
      this.limit = val
      this.getAgantList()
    },
    // 编辑经济
    async editFn(id) {
      // 弹窗显示
      this.showDialog = true
      // 数据回显---通过ref可以调用子组件的函数
      this.$refs.addAgant.getAgantList(id)
    },
    // 删除经济
    delFn(id) {
      this.$confirm('确定要删除该文件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口删除
        await delAgant(id)
        if (this.agantData.length === 1) {
          this.start = this.start - this.limit
        }
        this.getAgant()
        // 刷新页面
        this.getAgantList()
      }).catch(() => {

      })
    },
    // 新建经济
    addFn() {
      this.showDialog = true
    },
    async getAgantList() {
      const res = await getAgant({
        _limit: this.limit,
        _start: this.start
      })
      this.agantData = res.data
    },
    // 搜索
    async search() {
      if (this.name_contains) {
        const res = await getAgant({
          _limit: '100',
          _start: '0'
        })

        const newArr = []
        res.data.forEach(item => {
          if (item.name.indexOf(this.name_contains) !== -1) {
            newArr.push(item)
          }
        })
        this.agantData = newArr
        this.total = newArr.length
      } else {
        this.getAgantList()
        this.getAgant()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .agant-box {
    margin-top: 20px;
    padding: 0 20px;
    .agant-card {
      padding: 10px;
      .search-button-box{
        height: 80px;
        border-bottom: 1px solid #666;
        .input-with-select{
          width: 600px;
        }
      }
      .agant-table{
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
  }
  .imgHeader{
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
</style>
